@import "../../styles/mixin";
//
.k-spin {
  color: @theme-color;
  vertical-align: middle;
  text-align: center;

  &-dot {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    background-color: @theme-color;
    .square(@spin-dot-size);
    animation: spin-bounce 1.5s ease-in-out infinite;
  }

  &-huge &-dot {
    .square(@spin-dot-size-hg);
  }

  &-large &-dot {
    .square(@spin-dot-size-lg);
  }

  &-small &-dot {
    .square(@spin-dot-size-sl);
  }

  &-center {
    .center-middle-flex;
    height: inherit;
  }

  &-fix {
    .size(100%, 100vh);
    .custom-position(fixed, @top:0, @left:0, @zindex: @zindex-spin);
    background-color: transparent;
  }
  &-inline {
    display: inline-block;
    min-height: inherit;
    margin-right: 3%;
  }

  &-fix &-main {
    .center-middle-position;
  }

  &-fix &-dot {
    display: inline-block;
  }

  &-text,
  &-show-text &-dot {
    display: none;
  }

  &-show-text &-text {
    display: block;
    font-size: @font-size-base;
  }
}
